<template>
  <div class="border-line card">
    <header-title
      title="保障方式分析"
      :style="{ 'font-size': fontSize + 'px' }"
      @fullScreen="handleFullScreen"
    ></header-title>
    <div @mouseenter="clearAutoPlay" @mouseleave="setAutoPlay">
      <echarts-view ref="echarts" class="card-content" :options="option" height="260px"></echarts-view>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
// import * as echart from 'echarts'
import { getSituationGuarantee } from '@/api/analysis'
import { setFontSize } from '@/utils/util'
export default {
  props: {
    areaID: {
      type: Number,
      default: 0,
    },
    isFullscren: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    headerTitle,
    echartsView,
  },
  data() {
    return {
      autoPlayer: null,
      option: {},
      fontSize: 16,
    }
  },
  mounted() {
    this.fetchData()
    window.addEventListener('resize', this.screenAdatper)
  },
  watch: {
    areaID: function (newVal, oldVal) {
      this.fetchData()
    },
  },
  methods: {
    fetchData() {
      getSituationGuarantee({ RegionNo: this.areaID }).then((res) => {
        const xAxisData = []
        const btbzData = []
        const lhbzData = []
        const swbzData = []
        const zbzData = []
        res.forEach((e) => {
          const { BTBZHS, LHBZHS, SWBZHS, ZBZHS, simname, name } = e
          xAxisData.push(this.isFullscren ? name : simname)
          btbzData.push(BTBZHS)
          lhbzData.push(LHBZHS)
          swbzData.push(SWBZHS)
          zbzData.push(ZBZHS)
        })
        const options = {
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(44, 222, 221, 1)' }, // 设置颜色渐变
                { offset: 1, color: 'rgba(8, 149, 224, 1)' },
              ],
            },
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(200, 53, 38, 1)' },
                { offset: 1, color: 'rgba(242, 88, 73, 1)' },
              ],
            },
            'rgba(255, 238, 10, 1)',
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: 'rgb(22, 245, 255,.8)',
              },
            },
          },
          legend: {
            top: 0,
            left: 0,
            bottom: 10,
            textStyle: {
              color: '#fff',
            },
          },
          grid: {
            left: 0,
            right: 0,
            top: 40,
            bottom: '3%',
            containLabel: true,
          },
          yAxis: [
            {
              type: 'value',
              splitNumber: 4,
              axisTick: {
                // 刻度线
                show: false,
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                // 网格线
                show: false,
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(127, 214, 255, 1)',
                },
              },
            },
            {
              type: 'value',
              axisTick: {
                // 刻度线
                show: false,
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                // 网格线
                show: false,
              },
            },
          ],
          xAxis: [
            {
              type: 'category',
              data: xAxisData,
              axisTick: {
                // 刻度线
                show: false,
              },
              axisLine: {
                // 坐标轴
                show: false,
              },
              splitLine: {
                // 网格线
                show: false,
              },
            },
          ],
          series: [
            {
              name: '总保障人数',
              type: 'bar',
              data: zbzData,
              itemStyle: {
                color: '#3fb1e3',
                barBorderRadius: [30, 30, 0, 0],
                shadowColor: 'rgba(0,255,225,1)',
              },
            },
            {
              name: '实物保障人数',
              type: 'bar',
              data: swbzData,
              itemStyle: {
                color: '#6be6c1',
                barBorderRadius: [30, 30, 0, 0],
                shadowColor: 'rgba(0,255,225,1)',
              },
            },
            {
              name: '补贴保障人数',
              type: 'bar',
              data: btbzData,
              itemStyle: {
                color: '#a0a7e6',
                barBorderRadius: [30, 30, 0, 0],
                shadowColor: 'rgba(0,255,225,1)',
              },
            },
            {
              name: '轮候保障人数',
              type: 'bar',
              data: lhbzData,
              itemStyle: {
                color: '#626c91',
                barBorderRadius: [30, 30, 0, 0],
                shadowColor: 'rgba(0,255,225,1)',
              },
            },
          ],
          dataZoom: [
            {
              xAxisIndex: 0, // 这里是从X轴的0刻度开始
              show: false, // 是否显示滑动条，不影响使用
              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: 4, // 一次性展示多少个。
            },
          ],
        }
        this.option = options
        this.$nextTick(() => {
          this.setAutoPlay()
        })
      })
    },
    setAutoPlay() {
      this.clearAutoPlay('setAutoPlay')
      this.autoPlayer = setInterval(() => {
        if (this.option.dataZoom[0].endValue === 7) {
          this.option.dataZoom[0].endValue = 4
          this.option.dataZoom[0].startValue = 0
        } else {
          this.option.dataZoom[0].endValue = this.option.dataZoom[0].endValue + 1
          this.option.dataZoom[0].startValue = this.option.dataZoom[0].startValue + 1
        }
      }, 3000)
    },
    clearAutoPlay() {
      if (!this.$isEmpty(this.autoPlayer)) {
        clearInterval(this.autoPlayer)
      }
    },
    screenAdatper() {
      this.$refs.echarts && this.$refs.echarts.chart.resize()
      this.option.fontSize = setFontSize(30)
      this.$refs.echarts.setOptions(this.option)
      this.fontSize = setFontSize(30)
    },
    beforeDestoryed() {
      window.removeEventListener('resize')
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 320px;
  &-content {
    margin-top: 10px;
  }
}
</style>
